<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  <title>简易计算器</title>

  <script>
    function showPrice() {
      //成本(单位:元)
      let cost = parseFloat(goodsForm.cost.value)
      //重量(单位:kg)
      let weight = parseFloat(goodsForm.weight.value)
      //是否是重货
      let isHeavyGoods = (goodsForm.goodsType.value === "heavy")

      //汇率
      let exchangeRate = parseFloat(goodsForm.exchangeRate.value)
      //贴单(单位:元)
      let pastePrice = parseFloat(goodsForm.pastePrice.value)
      //利润(单位:元)
      let profit = parseFloat(goodsForm.profit.value)

      //总运费(单位:元)
      var totalTransportPrice = getTransportPrice(weight, isHeavyGoods)

      //售价 = (成本 + 贴单费 + 运费 + 利润) * 1.12
      //1.12 为平台手续费10%
      var totalSalePrice = parseInt((cost + pastePrice + totalTransportPrice + profit) * 1.12)

      //售价泰铢
      let thbSalePrice = parseInt(totalSalePrice * exchangeRate)

      //赋值到计算结果中
      document.getElementById("topPart").innerHTML = "成本: " + cost + " 元 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汇率: " + exchangeRate
      document.getElementById("middlePart").innerHTML = "重量: " + weight + " kg &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;总运费: " + totalTransportPrice + " 元"
      document.getElementById("bottomPart").innerHTML = "利润: " + profit + " 元 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贴单费: " + pastePrice + " 元"
      document.getElementById("salePricePart").innerHTML = "售价为: " + thbSalePrice + " 泰铢 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;折合人民币: " + totalSalePrice + "元"

      //拷贝售价到粘贴板
      copyText(thbSalePrice)
    }

    //计算运费
    function getTransportPrice(weight, isHeavyGoods) {
      console.log("")
      var totalPostage = 0
      //大于0.25都认为是重货
      if (weight > 0.25) {
        //按重货计算
        if (weight <= 0.5) {
          totalPostage = 16.8
        } else {
          //ceil是向上取整数，即ceil(1.1) = 2
          totalPostage = 16.8 + Math.ceil((weight - 0.5) / 0.1) * 2
        }
      } else {
        if (!isHeavyGoods) {
          //按普货计算
          if (weight <= 0.1) {
            totalPostage = 10.8
          } else {
            //ceil是向上取整数，即ceil(1.1) = 2
            totalPostage = 10.8 + Math.ceil((weight - 0.1) / 0.01) * 0.4
          }
        } else {
          //按重货计算
          totalPostage = 16.8
        }
      }

      return totalPostage
    }

    //复制到粘贴板
    function copyText(text) {
      var oInput = document.createElement('input');
      oInput.value = text + '';
      document.body.appendChild(oInput);
      oInput.select();
      document.execCommand("Copy");
      oInput.className = 'oInput';
      oInput.style.display = 'none';
    }

  </script>
  <style>
    body {
      position: absolute;
      width: 100%;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .title {
      font-size: 26px;
      font-weight: bolder;
      color: rgb(247, 60, 156);
    }

    form {
      margin-top: 30px;
    }

    tr {
      height: 30px;
    }

    td {
      height: 50px;
    }

    span {
      font-size: 20px;
    }

    input[type="text"] {
      margin-left: 5px;
      width: 200px;
      font-size: 18px;
      padding: 10px;
    }

    .fstd {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
    }

    select {
      margin-left: 5px !important;
      width: 220px;
      font-size: 18px !important;
      padding: 6px;
    }

    input[type="submit"] {
      margin-top: 26px;
      width: 80%;
      height: 36px;
      background-color: rgb(247, 60, 156);
      color: white;
      font-size: 18px;
      border: none;
      border-radius: 5px;
    }

    .result {
      margin-top: 40px;
      background-color: rgb(255, 238, 224);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .result span {
      margin: 10px;
      min-height: 16px;
      font-size: 16px;
      color: rgb(247, 60, 156);
    }
  </style>
</head>

<body>
  <div class="title">计价小程序</div>
  <form name="goodsForm" method="post" target="iframe">
    <table cellspacing="10">
      <tr>
        <td class="fstd"><span style="text-align: right;">成本:</span></td>
        <td colspan="6"><input type="text" placeholder="请输入成本" name="cost" /></td>
        <td><span style="text-align: left;">元</span></td>
      </tr>
      <tr>
        <td class="fstd"><span style="text-align: right;">重量:</span></td>
        <td colspan="6"><input type="text" value="1" placeholder="请输入重量" name="weight" /></td>
        <td><span style="text-align: left;">kg</span></td>
      </tr>
      <tr>
        <td class="fstd"><span style="text-align: right;">货物类型:</span></td>
        <td colspan="6">
          <select name="goodsType">
            <option value="heavy" selected>重货</option>
            <option value="light">轻货</option>
          </select>
        </td>
        <td><span style="text-align: left;"></span></td>
      </tr>
      <tr>
        <td class="fstd"><span style="text-align: right;">当前汇率:</span></td>
        <td colspan="6"><input type="text" value="4.8" placeholder="请输入汇率" name="exchangeRate" /></td>
        <td><span style="text-align: left;"></span></td>
      </tr>
      <tr>
        <td class="fstd"><span style="text-align: right;">贴单费:</span></td>
        <td colspan="6"><input type="text" value="3" placeholder="请输入贴单费" name="pastePrice" /></td>
        <td><span style="text-align: left;">元</span></td>
      </tr>
      <tr>
        <td class="fstd"><span style="text-align: right;">利润:</span></td>
        <td colspan="6"><input type="text" value="30" placeholder="请输入利润" name="profit" /></td>
        <td><span style="text-align: left;">元</span></td>
      </tr>
      <tr>
        <td colspan="2"></td>
        <td colspan="5">
          <input type="submit" value="计算" onclick="showPrice();" />
        </td>
      </tr>
    </table>
    <div class="result">
      <span>计算结果如下：</span>
      <span id="topPart"></span>
      <span id="middlePart"></span>
      <span id="bottomPart"></span>
      <span id="salePricePart"></span>
    </div>
  </form>
  <iframe id="iframe" name="iframe" style="display:none;"></iframe>
</body>

</html>